import React, { Component } from 'react'

import { Link, NavLink } from 'react-router-dom';
// react配置路由步骤
// 第一步: 下载路由包 npm i react-router-dom@5
// 第二步: 在入口文件index.js 文件中导入路由模式包, 并包裹根组件
// 第三步:配置路由, 导入路由组件Route,该组件上有两个属性path 和component
// path: 表示当前组件的路由规则路径
// component 表示匹配的组件
// Route 作用: 当前与 routes + router-view  的作用


// react路由导航的两种方式:
// 01: 声明式导航 <Link to='path'>文本</Link>或<NavLink to='path'></NavLink>
// Link 默认没有选中的类型 active ,  而 Navlink 有选中的类型, 可以设置选中的效果样式
// 声明式导航传参方式:
// 第一种: 查询字符串方式
// 第二种: restful风格
// 第三种: 对象形式  {pathname:'url',search:查询字符串拼接参数, state:{key:value,key:value}}
// 属性search 和 state 选择其一就可以
// state: 隐式传参 看不见参数在路由地址栏中, 所以可以做埋点操作, 就是用户不知情的情况下统计浏览用户群体分析数据等等


// 02: 编程式导航
// 定义: 借助在事件中调用 this.props.history.push(path) 可以实现编程式导航

// 前提, 当前组件实例上props 属性有history, 注意: 当该页面组件是通过路由跳转过来的. 那么
// 该组件实例的props 上就有路由三剑客(history,location, match),如果不是通过路由跳转的页面,
// 那么该页面实例上就没有该路由三剑客属性,所以可以使用withRouter 这个高阶组件函数包裹当前组件,]
// 当前组件就有路由三剑客了


// 路由重定向
// 使用react-router-dom 包中提供的Redirect组件,该组件有两个属性 from 和to
// from 属性: 表示 从那个地址
// to:属性: 表示重定向到哪一个地址
// 注意: 一般结合路由严格模式 exact 属性, 该重定向一般放在路由规则的最后面

//  404 路由
// 当路径地址中没有匹配到的组件的时候, 这时候匹配404 路由
//  语法:<Route component={组件名}></Route> 不需要设置path
// 注意: 一般结合Switch组件使用,因为 404 组件每次都匹配, 导致页面中同时显示2个组件,
// 使用Switch 作用: 每次从上到下依次匹配路由规则, 如果有匹配成功的, 就不往下匹配了.
// 一般写在路由规则最下面


import { Route, withRouter, Redirect, Switch } from 'react-router-dom';
import Home from './Home'
import Categoty from './Categoty'
import Car from './Car';
import Mine from './Mine';
import NotFind from './NotFind';
import './Father.css';
class Father extends Component {
    state = {
        id: 999,
        name: '林正英',
        age: 50
    }
    render() {
        return (
            <>
                {/*声明式导航 */}
                <div>
                    {/* 使用查询字符串方式 */}
                    {/* <NavLink to={`/home?id=${this.state.id}&age=${20}`}>首页</NavLink> */}
                    {/* restful 风格传参--猫眼电影案例*/}
                    {/* <NavLink to={'/category/' + this.state.id}>分类</NavLink>
                    <NavLink to={{
                        pathname: '/car',
                        search: `id=${this.state.id}`,
                        state: {
                            name: this.state.name,
                            age: this.state.age
                        }
                    }}>购物车</NavLink>
                    <NavLink to='/mine'>我的</NavLink> */}
                </div>
                {/* 编程式导航 */}
                <ul style={{ display: 'flex', listStyle: 'none' }}>
                    <li onClick={() => {
                        // console.log(this)
                        // this.props.history.push('/home')
                        // this.props.history.push('/home?id=88')
                        // this.props.history.push('/home/' + this.state.id)
                        this.props.history.push({
                            pathname: '/car',
                            search: `id=${this.state.id}`,
                            state: {
                                name: this.state.name,
                                age: this.state.age
                            }
                        })
                    }}>首页</li>
                    <li onClick={() => {
                        this.props.history.push('/category')
                    }}>分类</li>
                    <li>购物车</li>
                    <li>我的</li>
                </ul>

                {/* 路由匹配规则及显示的组件 */}
                <Switch>
                    <Route path='/home' component={Home}></Route>
                    {/*该path 是配合隐式传参方式 ?表示参数可传可不传  */}
                    <Route path='/category/:id?' component={Categoty}></Route>
                    <Route path='/car' component={Car}></Route>
                    <Route path='/mine' component={Mine}></Route>
                    {/* 路由重定向 */}
                    <Redirect from='/' to='/home' exact></Redirect>
                    <Route component={NotFind}></Route>
                </Switch>
            </>
        )
    }
}

export default withRouter(Father)